<template>
  <el-dialog
    title="提示"
    :visible.sync="visible"
    width="30%"
    :beforeClose="() => reject()"
  >
    <slot v-if="visible"> item </slot>
    <!-- <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="visible = false">确 定</el-button>
    </span> -->
  </el-dialog>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data () {
    return {
      $$single: null as { resolve: Function; reject: Function } | null,
      visible: false
    }
  },
  methods: {
    open () {
      if (this.$$single) throw new Error('close first')
      return new Promise((resolve, reject) => {
        this.$$single = { resolve, reject }
        this.visible = true
      }).finally(() => {
        this.$$single = null
        this.visible = false
      })
    },
    resolve (arg: unknown) {
      this.$$single && this.$$single.resolve(arg)
    },
    reject (arg: unknown) {
      this.$$single && this.$$single.reject(arg)
    }
  }
})
</script>
